<template>
    <el-card class="card">
        <sapn class="pbtn"></sapn>
        <span style="font-size: 20px; margin-bottom: 20px;">轮播图管理</span>
        <el-form>
            <el-form-item>
                <el-col span="6">
                    <!--日期组件 -->
                    <DatePicker></DatePicker>
                </el-col>
                <el-col span="6">
                    <el-autocomplete style="margin-left: 20px;width: 300px;line-height: 55px; height: 50px;"
                        v-model="articleList.searchKey" :fetch-suggestions="querySearch" popper-class="my-autocomplete"
                        placeholder="请输入关键字" @select="handleSelect">
                        <template #suffix>
                            <el-icon @click="handleIconClick">
                                <Search />
                            </el-icon>
                            &nbsp;&nbsp;
                            <el-icon @click="cancelIconClick">
                                <Close />
                            </el-icon>
                        </template>
                    </el-autocomplete>
                </el-col>
                <el-col span="6" style="margin-left: 23%;">
                    <el-button @click="addBanner" style="width: 120px;height:50px;border-radius: 20px;"
                        type="primary">新增轮播图</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="articleData.result" stripe style="width: 100%">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="picture" label="图片" width="100">
                <template #default="scope">
                    <el-image style="width: 50px; height: 50px" :src="`http://127.0.0.1:3000/${scope.row.picture}`"
                        fit="fill" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="Banner图名称" width="200" />
            <el-table-column prop="publisher" label="发布人" width="180" />
            <el-table-column prop="publishTime" label="发布时间" width="180" />
            <el-table-column prop="status" label="状态" width="180">
                <template #default="scope">
                    <el-switch @click="changeFlag(scope.row)" v-model="scope.row.status" width="60" inline-prompt
                        active-text="启动" inactive-text="禁用" />
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" link @click="editBannerList(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="deleteBannerList(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :list="articleList" :res="articleData" @changeCount="changeCount" @changePage="changePage">
        </Pagination>
    </el-card>
</template>

<script lang='ts' setup>
import DatePicker from '../ccc/DatePicker.vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const addBanner = () => {
    router.push('lbt/addBanner')
}
import { reactive, onMounted } from 'vue'
import { LabelSearchType, LabelReaultType } from '@/types/ccc/lable'
import api from '@/api'
import Pagination from '../ccc/Pagination.vue';
import { Search, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// 分页搜索筛选数据参数
const articleList = reactive<LabelSearchType>({
    searchKey: '',
    page: 1,
    count: 10
})
// 获取所有数据
const articleData = reactive<LabelReaultType>({
    total: 0,
    totalPage: 0,
    result: []
})
// 获取所有轮播图数据
const getBanner = async () => {
    const result = await api.systemSetting.banner.getAllBannerApi(articleList)
    console.log(result.data.data.result);
    articleData.result = result.data.data.result
    articleData.result.forEach((item: any) => {
        if (item.status === '1') {
            item.status = true
        } else {
            item.status = false
        }

    })
    articleData.total = result.data.data.total
    articleData.totalPage = result.data.data.totalPage
}
// 定义修改状态参数
const status = reactive({
    id: '',
    status: ''
})
// 修改状态
const changeFlag = async (item: any) => {
    status.id = item.id
    if (item.status) {
        // 1
        item.status = '1'
        status.status = item.status
    } else {
        // 0 
        item.status = '0'
        status.status = item.status
    }
    console.log(status);
    const result = await api.systemSetting.banner.updateBannerStatusByIdApi(status)
    console.log(result.data);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)
    } else {
        ElMessage.warning(result.data.msg)
    }
    getBanner()
}
onMounted(() => {
    getBanner()
})
// 编辑
const editBannerList = async (item: any) => {
    console.log(item);
    item = JSON.stringify(item)
    localStorage.setItem('item', item)
    router.push('lbt/editBanner')

}
// 删除轮播图
const deleteBannerList = async (id: number) => {
    console.log(id);
    const result = await api.systemSetting.banner.delBannerByIdApi(id)
    console.log(result);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)

    } else {
        ElMessage.warning(result.data.msg)

    }
    getBanner()
}
const changeCount = (arg: number) => {
    articleList.count = arg
    getBanner()

}
const changePage = (arg: number) => {
    articleList.page = arg
    getBanner()
}



interface LinkItem {
    value: string
    link: string
}

const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelect = (item: LinkItem) => {
    console.log(item)
}

// 查找
const handleIconClick = () => {
    getBanner()
}
// 取消查找
const cancelIconClick = () => {
    articleList.searchKey = ''
    getBanner()

}

</script>

<style lang='scss' scoped>
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

.pbtn {
    display: inline-block;
    width: 8px;
    height: 18px;
    border-radius: 20px;
    background-color: #409eff;
    margin-right: 10px;
}

.search {
    margin-left: 10px;
    margin-top: 10px;
    height: px;
    width: 300px;
}
</style>